liankao/src/pages/ksfx/stu_wdsj/[ykj_id].vue

<template>
  <div class="stu_stfx">
    <NavHeader />
    <bread-crumb />

    <div class="w-1200px m-auto min-h-650px flex flex-row justify-between">
      <div class="w-188px h-full" style="background-color: #fff;">
        <leftSiderStu :StuLeftMenuNum="StuLeftMenuNum" :ykjId="ykjId" />
      </div>

      <div class="w-1012px p-12 blueBg">

        <div class="w-full min-h-500px flex flex-row flex-wrap">
          <div class="w-1/4 text-center mb-8 cursor-pointer singlePart" v-for="(item, index) in imgArr" :key="index"
            @click="clickCurrent(item.allFullExamsJ)">
            <div class="p-4 picIn">
              <img :src=prefixedUrl+item.thumbImg alt="" />
            </div>
            <p>{{ item.examTitle }}</p>
          </div>
        </div>

        <div class="demo-pagination-block">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize4"
            :page-sizes="[12, 12*2, 12*3, 12*4,12*5]" :small="small" :disabled="disabled" background
            layout="total, sizes, prev, pager, next, jumper" :total="totalNum" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" style="justify-content: right;" />
        </div>

      </div>

    </div>

    <!-- dialog弹出框 -->
    <el-dialog v-model="dialogVisible" title="试卷预览" width="70%">
      <span class="dialogShow">

        <swiper :slidesPerView="1" :spaceBetween="30" :loop="true" :centeredSlides="true"
          :pagination="{ clickable: true }" :autoplay="{
            delay: 2500,
            disableOnInteraction: false
          }" :navigation="true" :modules="modules" class="mySwiper">
          <swiper-slide class="mainSwiper" v-for="(secItem, ind) in dialogShow" :key="ind">
            <img :src=prefixedUrl+secItem >
          </swiper-slide>
        </swiper>
      </span>
    </el-dialog>

    <commonFooter />
  </div>
</template>
<route lang="json">
  {
    "meta": {
      "title": "考试分析",
      "breadcrumb": true
    }
  }
  </route>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { student_wdsj_list } from "@/pages/ksfx/apiItem";
import {user} from "~/store";
const route = useRoute();

import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from 'swiper';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
//默认滑动效果（这里面注释掉的可以不要）
// const onSwiper = swiper => {
// 	console.log(swiper);
// };
// const onSlideChange = e => {
// 	// swiper切换的时候执行的方法
// 	console.log('slide change', e.activeIndex);
// };
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [Autoplay, Pagination, Navigation, A11y];


let StuLeftMenuNum = 1;
const imgArr = ref([]);
const dialogVisible = ref(false)
const dialogShow = ref([]);

const prefixedUrl =ref(window.GLOBAL_CONFIG.yzy);

const ykjId = ref();
ykjId.value = route.params.ykj_id;

const small = ref(false)
const disabled = ref(false)
const currentPage = ref(1)
const pageSize4 = ref(12)
const totalNum = ref();

onMounted(() => {
  initData()
})

const initData = () => {
  let transObj = {
    page:currentPage.value,
    limit:pageSize4.value,
    jh_id:route.params.ykj_id,
  }
  student_wdsj_list(transObj)
    .then(res => {
      if (res.code == "1") {
        imgArr.value = res.data.data.page_data;
        currentPage.value = res.data.data.page_now;
        pageSize4.value = 12;
        totalNum.value = Number(res.data.data.total_rows);
      } 
    })
    .catch(error => { console.log(error) });
}

// 点击单独试卷弹出（dialog弹出）
const clickCurrent = (item) => {
  dialogVisible.value = true;
  dialogShow.value = item;
}



const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageSize4.value = val;
  initData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val;
  initData();
}

</script>

<style scoped>
@import '@/styles/ksfx.css';
:deep(.el-pagination.is-background .el-pager li.is-active){
  background-color:#0148E5;
}
.mainSwiper {
  text-align: center;
}

.mainSwiper img {
  display: inline-block;
}

.dialogShow img {
  width: 100%;
  display: inline-block;
}

.picIn img {
  width: 100%;
  height: 100%;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>